ctx.clearRect(0, 0, 300, 300);
var len  = 3; /* len for draw */
var thick = 2;
var angle = 30;
var heading = 0; /* 1
                  4   2
                    3   */

//if( window.curX == undefined ){                                       
  window.curX = 150;
//}
  window.curY = 150;
var actions = { 'F': function(){
    /* draw forward */
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.lineTo(curX, curY - len);
    ctx.lineTo(curX + thick, curY - len);
    ctx.lineTo(curX + thick, curY);

    ctx.closePath();
    ctx.stroke();
    this.G();
  },
  'G': function(){
    ctx.moveTo(curX, curY - len);
  },
  'R': function(){
    ctx.rotate( angle * Math.PI / 180);
  },
  'L': function(){
    ctx.rotate( -1 * angle * Math.PI / 180);
  },
  '[':"TODO",
  ']':"TODO",
  '|':"TODO"
};

function expand(axiom, times){
  var newAxiom = '';
  for(var i=0; i < axiom.length; i++){
    if(rules[ axiom[i] ] == undefined ){
      newAxiom += axiom[i];
    }else{
      newAxiom += rules[ axiom[i] ];
    }
  }
  if( times > 0){
    return expand(newAxiom, (times -1));
  }else{  
    return newAxiom;
  }
}
function turtleGraphics(axiom){

  for(var i=0; i < axiom.length; i++){
    if(actions[ axiom[i] ] == undefined ){
      //console.warn("Ignorning " + axiom[i]);
    }else{
      actions[axiom[i]]();
    }
  }
  console.info("done " + (new Date().getTime() - startTime));
}
var axiom = 'FF';
var rules = {'F': 'FFR',
             'G': 'GIRAFFE'}

//console.info( expand( expand('F')));
startTime = new Date().getTime();
console.info("Starting");

turtleGraphics(expand(axiom, 7));
ctx.strokeRect(0, 0, 300, 300);
